<template>
	<view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 画面描述</text>
			</view>
			<view class="values">
				<prompt type="openai" ref="prompt"></prompt>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 尺寸</text>
			</view>
			<view class="values">
				<foxRadio name="size"
					:lists="[{title: '1024x1024', value: '1024x1024'},{title: '1024x1792', value: '1024x1792'},{title: '1792x1024', value: '1792x1024'}]"
					:checked="options.size" @change="onRadioChange"></foxRadio>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 质量</text>
			</view>
			<view class="values">
				<foxRadio name="quality" :lists="[{title: '标准', value: 'standard'},{title: '高清', value: 'hd'}]" :checked="options.quality" @change="onRadioChange"></foxRadio>
			</view>
		</view>
		<view class="setting-row">
			<view class="label">
				<text>✳ 风格</text>
			</view>
			<view class="values">
				<foxRadio name="style" :lists="[{title: '自然', value: 'natural'},{title: '鲜艳', value: 'vivid'}]" :checked="options.style" @change="onRadioChange"></foxRadio>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import prompt from './prompt'
	export default {
		components: {
			prompt
		},
		data() {
			return {
				defaultOptions: {
					size: '1024x1024',
				    quality: 'standard',
				    style: 'natural'
				},
				options: {}
			}
		},
		created() {
			this.options = JSON.parse(JSON.stringify(this.defaultOptions))
		},
		methods: {
			onRadioChange(e) {
				let name = e.name
				let value = e.value
				this.$set(this.options, name, value)
			},
			getDrawOptions() {
				const options = JSON.parse(JSON.stringify(this.options))
				options.words = this.$refs['prompt'].getWordsPicked()
				return options
			},
			clearDrawOptions() {
				this.$refs.prompt.clearPicked()
			},
			setDrawOptions(options) {
				options = Object.assign(this.defaultOptions, options)
				this.options = JSON.parse(JSON.stringify(options))
				if (options.words) {
					this.$refs.prompt.setWords(options.words)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setting-row {
		width: 100%;
		margin-bottom: 20rpx;
		background: #f7f7f8;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.label {
			width: 100%;
			font-size: 32rpx;
			line-height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.values {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
		}
	}
</style>